<template>
  <div class="detail-wrap">
    <div class="left-container">
      <div class="video-info-v1 video-info-v1-ab">
        <h1
          title="【医学博士】洗了20多年澡，原来都洗错了！I 到底多久洗一次澡最合理？"
          class="video-title tit"
        >
          【医学博士】洗了20多年澡，原来都洗错了！I 到底多久洗一次澡最合理？
        </h1>
        <div class="video-data">
          <div class="video-data-list">
            <a href="/" class="honor item honor-rank">
              <span class="honor-icon">
                <svg
                  t="1668392162297"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3557"
                  width="16"
                  height="16"
                >
                  <path
                    d="M289.6896 922.9824H167.7312c-33.8944 0-61.3376-27.4432-61.3376-61.3376V445.0816c0-33.8944 27.4432-61.3376 61.3376-61.3376h122.0096c33.8944 0 61.3376 27.4432 61.3376 61.3376v416.5632c0 33.8432-27.4944 61.3376-61.3888 61.3376z"
                    fill="#ff6699"
                    p-id="3558"
                  ></path>
                  <path
                    d="M576.4608 922.9824H452.9152c-33.4336 0-60.5696-27.136-60.5696-60.5696V162.9696c0-33.4336 27.136-60.5696 60.5696-60.5696h123.5456c33.4336 0 60.5696 27.136 60.5696 60.5696v699.4432c0 33.4336-27.0848 60.5696-60.5696 60.5696zM880.0768 922.9824h-158.7712c-23.7568 0-42.9568-19.2512-42.9568-42.9568v-254.6176c0-23.7568 19.2512-42.9568 42.9568-42.9568h158.7712c23.7568 0 42.9568 19.2512 42.9568 42.9568v254.6176c0 23.7056-19.2512 42.9568-42.9568 42.9568z"
                    fill="#ff6699"
                    p-id="3559"
                  ></path>
                  <path
                    d="M577.6384 102.4H451.7888c-32.8192 0-59.4432 26.624-59.4432 59.4432v701.696c0 32.8192 26.624 59.4432 59.4432 59.4432h94.8736c30.5664-11.8784 59.904-26.1632 87.9104-42.496 1.5872-5.376 2.4576-11.0592 2.4576-16.9472V161.8432c0-32.8192-26.5728-59.4432-59.392-59.4432zM892.5184 589.9776c-8.5504-4.7616-18.432-7.5264-28.928-7.5264H737.792c-32.8192 0-59.4432 26.624-59.4432 59.4432v210.4832c93.4912-65.6896 168.1408-156.416 214.1696-262.4z"
                    fill="#ff6699"
                    p-id="3560"
                  ></path>
                  <path
                    d="M291.6352 383.6928H165.7856c-32.8192 0-59.4432 26.624-59.4432 59.4432v299.2128c14.3872 0.9728 28.8768 1.536 43.4688 1.536 70.4 0 138.0864-11.6736 201.216-33.1776V443.136c0.0512-32.8192-26.5728-59.4432-59.392-59.4432zM637.0304 509.44V161.8432c0-32.8192-26.624-59.4432-59.4432-59.4432H451.7888c-32.8192 0-59.4432 26.624-59.4432 59.4432v533.1456c96.3584-40.7552 180.2752-105.0112 244.6848-185.5488z"
                    fill="#ff6699"
                    p-id="3561"
                  ></path>
                  <path
                    d="M106.3424 443.136v69.7856a620.288 620.288 0 0 0 237.6704-97.8432c-10.0352-18.688-29.696-31.3856-52.3776-31.3856H165.7856c-32.8192 0-59.4432 26.624-59.4432 59.4432zM582.7072 102.656c-1.6896-0.1536-3.3792-0.256-5.12-0.256H451.7888c-32.8192 0-59.4432 26.624-59.4432 59.4432v216.7296c86.4256-72.192 152.9856-167.2704 190.3616-275.9168z"
                    fill="#ff6699"
                    p-id="3562"
                  ></path>
                </svg>
              </span>
              <span class="honor-text">全站排行榜最高第30名</span>
              <span class="honor-arrow"> </span>
            </a>
            <span title="总播放数3117030" class="view item"
              ><img
                src="//s1.hdslb.com/bfs/static/jinkela/video/asserts/view.svg"
                alt=""
              />
              311.7万
            </span>
            <span title="历史累计弹幕数6760" class="dm item">
              <img
                src="//s1.hdslb.com/bfs/static/jinkela/video/asserts/dm.svg"
                alt=""
              />
              6760
            </span>
            <span class="dm item">
              <img
                src=""
                alt=""
              />
              2022-10-25 19:58:25
            </span>
            <span title="未经作者授权，禁止转载" class="dm item">
              <svg
                t="1668393380312"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4695"
                width="16"
                height="16"
              >
                <path
                  d="M828.32 828.32a448 448 0 1 1 0-633.6 448 448 0 0 1 0 633.6z m-565.76-67.84a352.288 352.288 0 0 0 463.68 29.76L232.8 296.8a352.288 352.288 0 0 0 29.76 463.68z m497.92-497.92a352.288 352.288 0 0 0-463.68-29.76l493.44 493.44a352.288 352.288 0 0 0-29.76-463.68z"
                  fill="#d81e06"
                  p-id="4696"
                ></path>
              </svg>
              未经作者授权，禁止转载
            </span>
          </div>
        </div>
      </div>
      <div class="player-wrap">
        <video
          height="100%"
          autoplay
          controls
          muted
          loop
          src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
        ></video>
      </div>
      <div class="video-toolbar-v1">
        <div class="toolbar-left">
          <span title="点赞（Q）" class="like">
            <svg
              width="36"
              height="36"
              viewBox="0 0 36 36"
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"
              ></path>
            </svg>
            <span class="info-text">19.5万</span>
          </span>
          <span title="投币（W）" class="coin">
            <canvas
              width="34"
              height="34"
              class="ring-progress"
              style="width: 34px; height: 34px; left: -3px; top: -3px"
            ></canvas>
            <svg
              width="36"
              height="36"
              viewBox="0 0 28 28"
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              style="fill: "
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"
              ></path>
            </svg>
            <span class="info-text">3.5万</span>
          </span>
          <span title="收藏（E）" class="collect">
            <canvas
              width="34"
              height="34"
              class="ring-progress"
              style="width: 34px; height: 34px; left: -3px; top: -3px"
            ></canvas>
            <svg
              width="36"
              height="36"
              viewBox="0 0 28 28"
              xmlns="http://www.w3.org/2000/svg"
              class="icon"
              style="fill: "
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M19.8071 9.26152C18.7438 9.09915 17.7624 8.36846 17.3534 7.39421L15.4723 3.4972C14.8998 2.1982 13.1004 2.1982 12.4461 3.4972L10.6468 7.39421C10.1561 8.36846 9.25639 9.09915 8.19315 9.26152L3.94016 9.91102C2.63155 10.0734 2.05904 11.6972 3.04049 12.6714L6.23023 15.9189C6.96632 16.6496 7.29348 17.705 7.1299 18.7605L6.39381 23.307C6.14844 24.6872 7.62063 25.6614 8.84745 25.0119L12.4461 23.0634C13.4276 22.4951 14.6544 22.4951 15.6359 23.0634L19.2345 25.0119C20.4614 25.6614 21.8518 24.6872 21.6882 23.307L20.8703 18.7605C20.7051 17.705 21.0339 16.6496 21.77 15.9189L24.9597 12.6714C25.9412 11.6972 25.3687 10.0734 24.06 9.91102L19.8071 9.26152Z"
              ></path>
            </svg>
            <span class="info-text">4.1万</span>
          </span>
          <span class="share-wrap">
            <span
              id="share-btn-outer"
              class="share van-popover__reference"
              aria-describedby="van-popover-6167"
              tabindex="0"
            >
              <div class="info-text">
                <svg
                  t="1668395237097"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5778"
                  width="24"
                  height="24"
                >
                  <path
                    d="M919.272727 416.581818L607.418182 79.127273c-11.636364-11.636364-32.581818-11.636364-44.218182 0-6.981818 6.981818-9.309091 16.290909-9.309091 25.6v181.527272c-258.327273 0-465.454545 207.127273-465.454545 463.127273 0 62.836364 13.963636 125.672727 39.563636 183.854546 37.236364-193.163636 221.090909-339.781818 425.890909-339.781819v181.527273c-2.327273 9.309091 2.327273 18.618182 9.309091 25.6 4.654545 6.981818 13.963636 9.309091 23.272727 9.309091s18.618182-4.654545 23.272728-11.636364L919.272727 465.454545c6.981818-6.981818 9.309091-13.963636 9.309091-23.272727s-4.654545-18.618182-9.309091-25.6z"
                    p-id="5779"
                  ></path>
                </svg>
                <span>2.0万</span>
              </div>
            </span>
          </span>
        </div>
        <div class="toolbar-right">
          <div class="manuscript-report">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.40194 3.75C10.5566 1.74999 13.4434 1.75001 14.5981 3.75L21.7428 16.125C22.8975 18.125 21.4541 20.625 19.1447 20.625H4.8553C2.5459 20.625 1.10253 18.125 2.25723 16.125L9.40194 3.75ZM12.866 4.75C12.4811 4.08333 11.5189 4.08333 11.134 4.75L3.98928 17.125C3.60438 17.7917 4.08551 18.625 4.8553 18.625H19.1447C19.9145 18.625 20.3957 17.7917 20.0108 17.125L12.866 4.75Z"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 8C12.4142 8 12.75 8.33579 12.75 8.75V13.75C12.75 14.1642 12.4142 14.5 12 14.5C11.5858 14.5 11.25 14.1642 11.25 13.75V8.75C11.25 8.33579 11.5858 8 12 8Z"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 15.5C12.4142 15.5 12.75 15.8358 12.75 16.25V16.75C12.75 17.1642 12.4142 17.5 12 17.5C11.5858 17.5 11.25 17.1642 11.25 16.75V16.25C11.25 15.8358 11.5858 15.5 12 15.5Z"
              ></path>
            </svg>
            稿件投诉
          </div>
          <div class="note-btn note-btn__blue">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M6.75 10C6.75 9.58579 7.08579 9.25 7.5 9.25H16.5C16.9142 9.25 17.25 9.58579 17.25 10C17.25 10.4142 16.9142 10.75 16.5 10.75H7.5C7.08579 10.75 6.75 10.4142 6.75 10Z"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M6.75 14C6.75 13.5858 7.08579 13.25 7.5 13.25H13C13.4142 13.25 13.75 13.5858 13.75 14C13.75 14.4142 13.4142 14.75 13 14.75H7.5C7.08579 14.75 6.75 14.4142 6.75 14Z"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M12 5.25C9.48998 5.25 7.29811 5.3777 5.75109 5.50315C4.79223 5.58091 4.05407 6.31053 3.96899 7.25687C3.85555 8.51874 3.75 10.1822 3.75 12C3.75 13.8178 3.85555 15.4813 3.96899 16.7431C4.05408 17.6895 4.79214 18.4191 5.75095 18.4968C7.17292 18.6122 9.14013 18.7294 11.3987 18.7476C11.951 18.752 12.3951 19.2033 12.3906 19.7556C12.3862 20.3079 11.9349 20.752 11.3826 20.7475C9.06584 20.7289 7.04905 20.6087 5.58929 20.4903C3.67182 20.3348 2.15034 18.8499 1.97703 16.9222C1.8597 15.6172 1.75 13.892 1.75 12C1.75 10.108 1.8597 8.38283 1.97703 7.07779C2.15034 5.15 3.67203 3.66518 5.58944 3.50969C7.17721 3.38094 9.42438 3.25 12 3.25C14.5759 3.25 16.8232 3.38096 18.411 3.50973C20.3281 3.6652 21.8497 5.14946 22.0231 7.07716C22.1127 8.07392 22.1977 9.31512 22.233 10.6888C22.2471 11.2409 21.811 11.6999 21.2589 11.7141C20.7068 11.7282 20.2478 11.2921 20.2336 10.74C20.1997 9.41683 20.1177 8.21901 20.0311 7.25626C19.946 6.31026 19.2081 5.58094 18.2494 5.50319C16.7023 5.37772 14.5103 5.25 12 5.25Z"
              ></path>
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M18.2557 13.3102C19.0368 12.5292 20.3031 12.5292 21.0841 13.3102L22.4983 14.7244C23.2794 15.5055 23.2794 16.7718 22.4983 17.5528L18.5486 21.5026C18.1735 21.8777 17.6648 22.0884 17.1344 22.0884L15.0702 22.0884C14.3246 22.0884 13.7202 21.484 13.7202 20.7384V18.6742C13.7202 18.1437 13.9309 17.635 14.306 17.26L18.2557 13.3102ZM21.0841 16.1386L19.6699 14.7244L15.7202 18.6742L15.7202 20.0884L17.1344 20.0884L21.0841 16.1386Z"
              ></path>
            </svg>
            15 篇笔记
          </div>
          <span>
            <div
              role="tooltip"
              id="van-popover-227"
              aria-hidden="true"
              class="van-popover van-popper van-more"
              tabindex="0"
              style="display: none"
            >
              <ul class="more_dropdown">
                <li>
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M12 3.5C10.6496 3.5 9.53249 3.53222 8.64873 3.5744C7.72626 3.61842 7 4.38661 7 5.38943V18.4755C7 19.5179 7.78985 20.3555 8.78977 20.4074C9.77574 20.4585 10.9118 20.5 12 20.5C13.0882 20.5 14.2243 20.4585 15.2102 20.4074C16.2102 20.3555 17 19.5179 17 18.4755V5.38943C17 4.38661 16.2737 3.61842 15.3513 3.5744C14.4675 3.53222 13.3504 3.5 12 3.5ZM8.55339 1.57667C9.46887 1.53298 10.6177 1.5 12 1.5C13.3823 1.5 14.5311 1.53298 15.4466 1.57667C17.5137 1.67531 19 3.3993 19 5.38943V18.4755C19 20.5408 17.4175 22.2956 15.3138 22.4047C14.3077 22.4569 13.1346 22.5 12 22.5C10.8654 22.5 9.69229 22.4569 8.68617 22.4047C6.58246 22.2956 5 20.5408 5 18.4755V5.38943C5 3.39931 6.48631 1.67531 8.55339 1.57667Z"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M9.75 6C9.75 5.58579 10.0858 5.25 10.5 5.25H13.5C13.9142 5.25 14.25 5.58579 14.25 6C14.25 6.41421 13.9142 6.75 13.5 6.75H10.5C10.0858 6.75 9.75 6.41421 9.75 6Z"
                    ></path>
                    <path
                      d="M12.9994 17.9995C12.9994 18.5514 12.5519 18.9989 11.9999 18.9989C11.448 18.9989 11.0005 18.5514 11.0005 17.9995C11.0005 17.4475 11.448 17 11.9999 17C12.5519 17 12.9994 17.4475 12.9994 17.9995Z"
                    ></path>
                  </svg>
                  用手机看
                </li>
                <li>
                  <div class="ops-watch-later van-watchlater">
                    <span class="wl-tips" style="display: none"></span>
                  </div>
                  <svg
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M11.5 4C7.08172 4 3.5 7.58172 3.5 12C3.5 16.4183 7.08172 20 11.5 20C13.709 20 15.7072 19.106 17.156 17.6578C17.5465 17.2673 18.1797 17.2674 18.5702 17.658C18.9606 18.0486 18.9605 18.6817 18.5699 19.0722C16.7615 20.8801 14.2606 22 11.5 22C5.97715 22 1.5 17.5228 1.5 12C1.5 6.47715 5.97715 2 11.5 2C17.0228 2 21.5 6.47715 21.5 12C21.5 12.3748 21.4793 12.7451 21.439 13.1099C21.3783 13.6588 20.8841 14.0546 20.3352 13.9939C19.7863 13.9333 19.3904 13.4391 19.4511 12.8901C19.4834 12.5982 19.5 12.3012 19.5 12C19.5 7.58172 15.9183 4 11.5 4Z"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M17.7929 10.7929C18.1834 10.4024 18.8166 10.4024 19.2071 10.7929L20.5 12.0858L21.7929 10.7929C22.1834 10.4024 22.8166 10.4024 23.2071 10.7929C23.5976 11.1834 23.5976 11.8166 23.2071 12.2071L21.2071 14.2071C21.0196 14.3946 20.7652 14.5 20.5 14.5C20.2348 14.5 19.9804 14.3946 19.7929 14.2071L17.7929 12.2071C17.4024 11.8166 17.4024 11.1834 17.7929 10.7929Z"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M14.625 10.4846C15.7917 11.1582 15.7917 12.8422 14.625 13.5157L10.875 15.6808C9.70834 16.3544 8.25 15.5124 8.25 14.1653L8.25 9.83513C8.25 8.48798 9.70834 7.64601 10.875 8.31959L14.625 10.4846ZM13.875 12.2167C14.0417 12.1205 14.0417 11.8799 13.875 11.7837L10.125 9.61862C9.95833 9.5224 9.75 9.64268 9.75 9.83513L9.75 14.1653C9.75 14.3577 9.95833 14.478 10.125 14.3818L13.875 12.2167Z"
                    ></path>
                  </svg>
                  稍后再看
                </li>
                <!---->
              </ul>
            </div>
            <div
              class="more van-popover__reference"
              aria-describedby="van-popover-227"
              tabindex="0"
            >
              <svg
                width="24"
                height="24"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M13.7484 5.49841C13.7484 6.46404 12.9656 7.24683 11.9999 7.24683C11.0343 7.24683 10.2515 6.46404 10.2515 5.49841C10.2515 4.53279 11.0343 3.75 11.9999 3.75C12.9656 3.75 13.7484 4.53279 13.7484 5.49841ZM13.7484 18.4985C13.7484 19.4641 12.9656 20.2469 11.9999 20.2469C11.0343 20.2469 10.2515 19.4641 10.2515 18.4985C10.2515 17.5328 11.0343 16.75 11.9999 16.75C12.9656 16.75 13.7484 17.5328 13.7484 18.4985ZM11.9999 13.7485C12.9656 13.7485 13.7484 12.9656 13.7484 12C13.7484 11.0343 12.9656 10.2515 11.9999 10.2515C11.0343 10.2515 10.2515 11.0343 10.2515 12C10.2515 12.9656 11.0343 13.7485 11.9999 13.7485Z"
                ></path>
              </svg></div
          ></span>
        </div>
      </div>
      <div class="left-container-under-player">
        <div class="video-text">
          <span ref="videoTextWrap" class="video-text-wrap"
            >又是一期下功夫的视频，本期寻踪了碱性骗局的故事，希望大家看着过瘾请给我一个三连~谢谢！<br /><br />
            您可能还喜欢：<br />
            【脱发头屑】BV1Ra411u7Yo<br />
            【无糖饮料】BV1TV4y1p7GK<br />
            【猝死急救】BV1bS4y1W7A5<br />
            【牛奶骗局】BV1hY4y1c7pA<br />
            【梦话梦游】BV1bG41187Xz
          </span>
          <div @click="openMore" class="video-text-more" v-if="isMore">
            展开更多
          </div>
          <div @click="packUp" class="video-text-more" v-else>收起</div>
        </div>
      </div>
    </div>
    <div class="right-container">
      <div class="user-info">
        <div class="u-face">
          <a
            href="//space.bilibili.com/7788379"
            target="_blank"
            report-id="head"
            class="u-face__avatar avatar-loaded"
          >
            <div
              class="bili-avatar"
              style="width: 48px; height: 48px; transform: translate(0px, 0px)"
            >
              <img
                class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                data-src="https://i1.hdslb.com/bfs/face/7ab577c36aac95d53f03c9b6f92ea24ab1edfe98.jpg@96w_96h_1c_1s.webp"
                alt=""
                src="https://i1.hdslb.com/bfs/face/7ab577c36aac95d53f03c9b6f92ea24ab1edfe98.jpg@96w_96h_1c_1s.webp"
              />

              <span
                class="bili-avatar-icon bili-avatar-right-icon bili-avatar-icon-personal bili-avatar-size-48"
              ></span>
            </div>
          </a>
        </div>
        <div class="up-info_right">
          <div class="name" style="color: #fb7299">
            <!----><a
              href="//space.bilibili.com/7788379"
              target="_blank"
              report-id="name"
              class="username is_vip"
              style="color: #fb7299"
            >
              兔叭咯
              <span class="mask"></span></a
            ><a
              href="//message.bilibili.com/#whisper/mid7788379"
              target="_blank"
              class="up-info_right_message"
              ><i class="van-icon-videodetails_messag"></i>
              发消息
            </a>
          </div>
          <div
            title="这tm！白起这么早了！商务微信：tubage520520   "
            class="desc"
          >
            这tm！白起这么早了！商务微信：tubage520520
          </div>
          <div class="btn-panel">
            <!----><!----><!----><!---->
            <div
              class="default-btn follow-btn btn-transition b-gz not-follow"
              style=""
            >
              <span class=""
                ><svg
                  width="16"
                  height="16"
                  viewBox="0 0 16 16"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M7.25098 8.75V13.25C7.25098 13.6642 7.58676 14 8.00098 14C8.41519 14 8.75098 13.6642 8.75098 13.25V8.75H13.251C13.6652 8.75 14.001 8.41421 14.001 8C14.001 7.58579 13.6652 7.25 13.251 7.25H8.75098V2.75C8.75098 2.33579 8.41519 2 8.00098 2C7.58676 2 7.25098 2.33579 7.25098 2.75V7.25H2.75098C2.33676 7.25 2.00098 7.58579 2.00098 8C2.00098 8.41421 2.33676 8.75 2.75098 8.75H7.25098Z"
                    fill="white"
                  ></path>
                </svg>
                关注 694.1万 </span
              ><!---->
            </div>
          </div>
        </div>
      </div>
      <div class="barrage">
        <div class="barrage-left">
          <span>弹幕列表</span>
          <svg
            t="1668422133758"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3700"
            width="16"
            height="16"
          >
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="3701"
            ></path>
          </svg>
        </div>
        <div class="barrage-right">
          <svg
            t="1668422161037"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4717"
            width="12"
            height="12"
          >
            <path
              d="M512 625.664L131.584 245.248c-28.16-28.16-73.216-28.16-101.376 0s-28.16 73.216 0 101.376l420.864 420.864c2.56 4.096 5.632 7.68 9.216 11.264 14.336 14.336 32.768 21.504 51.712 20.992 18.432 0 37.376-6.656 51.712-20.992 3.584-3.584 6.656-7.168 9.216-11.264l420.864-420.864c13.824-13.824 20.992-32.256 20.992-50.688 0-18.432-7.168-36.864-20.992-50.688-28.16-28.16-73.216-28.16-101.376 0L512 625.664z"
              fill="#646464"
              p-id="4718"
            ></path>
          </svg>
        </div>
      </div>
      <div data-v-9ea81326="" data-v-1f3401b8="" class="vcd">
        <div data-v-9ea81326="" data-v-1f3401b8="" class="cover">
          <img
            data-v-9ea81326=""
            data-v-1f3401b8=""
            src="https://i0.hdslb.com/bfs/sycp/creative_img/202208/a0a084777d11903d66cd63b1df020458.jpg@.webp"
            alt="0基础入门【3D建模】, 在家接单养活自己"
            class="cover-img"
          />
        </div>
        <div data-v-9ea81326="" data-v-1f3401b8="" class="info">
          <p
            data-v-9ea81326=""
            data-v-1f3401b8=""
            title="0基础入门【3D建模】, 在家接单养活自己"
            class="title"
          >
            0基础入门【3D建模】, 在家接单养活自己
          </p>
          <p data-v-9ea81326="" data-v-1f3401b8="">
            <!----><svg
              data-v-9ea81326=""
              data-v-1f3401b8=""
              width="28"
              height="16"
              viewBox="0 0 28 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                data-v-9ea81326=""
                data-v-1f3401b8=""
                d="M0.25 2C0.25 1.0335 1.0335 0.25 2 0.25H26C26.9665 0.25 27.75 1.0335 27.75 2V14C27.75 14.9665 26.9665 15.75 26 15.75H2C1.0335 15.75 0.25 14.9665 0.25 14V2Z"
                stroke="#9499A0"
                stroke-width="0.5"
              ></path>
              <path
                data-v-9ea81326=""
                data-v-1f3401b8=""
                d="M9.26 3.18L8.47 3.32C8.67 3.64 8.86 4 9.02 4.39H5.3V7.32C5.28 9.34 4.98 10.91 4.42 12.05L5.01 12.58C5.66 11.26 6 9.51 6.04 7.32V5.08H13.45V4.39H9.81C9.63 3.94 9.45 3.54 9.26 3.18ZM22.29 8.81H15.77V12.49H16.5V11.96H21.56V12.49H22.29V8.81ZM16.5 11.28V9.5H21.56V11.28H16.5ZM16.37 5.43H18.76V7.05H14.48V7.76H23.52V7.05H19.49V5.43H22.76V4.74H19.49V3.32H18.76V4.74H16.8C17 4.37 17.16 3.98 17.29 3.56L16.57 3.48C16.25 4.53 15.63 5.42 14.73 6.14L15.16 6.71C15.63 6.32 16.03 5.89 16.37 5.43Z"
                fill="#9499A0"
              ></path>
            </svg>
            <!----><span data-v-9ea81326="" data-v-1f3401b8="">
              3D建模训练营~
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoDetail",
  data() {
    return {
      isMore: true,
    };
  },
  methods: {
    openMore() {
      this.isMore = false;
      this.$refs.videoTextWrap.style.height = "auto";
    },
    packUp() {
      this.isMore = true;
      this.$refs.videoTextWrap.style.height = "84px";
    },
  },
};
</script>

<style lang="less" scoped>
.detail-wrap {
  max-width: 2540px;
  min-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  box-sizing: content-box;
  position: relative;
  border: 1px solid black;
  height: 1000px;
}
.left-container {
  width: 668px;
}
.right-container {
  width: 350px;
  flex: none;
  margin: 30px 0 0 30px;
  position: relative;
  pointer-events: none;
}

.video-info-v1 {
  height: 94px;
  box-sizing: border-box;
  padding-top: 24px;
}
.video-info-v1-ab {
  height: 106px;
}
.player-wrap {
  height: 422px;
  position: relative;
  overflow: hidden;
  box-shadow: 1px -1px 16px 7px rgb(0 0 0 / 10%);
}
.video-toolbar-v1 {
  box-sizing: content-box;
  border-bottom: 1px solid #e3e5e7;
  padding-top: 16px;
  padding-bottom: 12px;
  height: 28px;
  line-height: 28px;
}
.left-container-under-player {
  width: 100%;
}

.video-title {
  line-height: 28px;
  font-size: 20px;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  color: #18191c;
  line-height: 24px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.video-info-v1 .video-data {
  font-size: 13px;
  color: #9499a0;
  display: flex;
  align-items: center;
  height: 24px;
  line-height: 18px;
  position: relative;
  overflow: hidden;
}

.video-info-v1 .video-data .video-data-list {
  display: flex;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
}
.honor.item {
  line-height: 24px;
}
.honor {
  display: flex;
  font-size: 13px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  padding: 0px 6px;
  margin-right: 12px;
  position: relative;
}
.item {
  flex-shrink: 0;
  margin-right: 12px;
  overflow: hidden;
}
a {
  color: #222;
  background-color: transparent;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
}
.honor-rank {
  color: #ff6699;
  background-color: rgba(255, 102, 153, 0.1);
  border-radius: 2px;
}
.honor-icon {
  margin-top: 2px;
}

.view {
  display: flex;
  align-items: center;
  img {
    margin-right: 3px;
  }
}
.dm {
  display: flex;
  align-items: center;
  img {
    margin-right: 3px;
    height: 20px;
  }
  svg {
    margin-right: 3px;
  }
}
.pudate-ip {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 24px;
  font-size: 0px;
}

.pudate-text {
  font-size: 13px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.toolbar-left {
  float: left;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  font-size: 13px;
  color: #61666d;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  height: 100%;
  span {
    width: 92px;
    margin-right: 8px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    fill: #61666d;
    svg {
      margin-right: 10px;
    }
  }
}
.ring-progress {
  position: absolute;
}
.info-text {
  display: flex;
  align-items: flex-end;
}
.toolbar-right {
  position: relative;
  float: right;
  display: flex;
  align-items: center;
  color: #61666d;
  height: 100%;
  font-size: 13px;
  display: flex;
  align-items: center;
  span {
    margin-left: 10px;
    line-height: 8px;
  }
}
.manuscript-report {
  margin-right: 18px;
  display: flex;
  align-items: center;
  svg {
    margin-right: 10px;
  }
}
.note-btn {
  display: flex;
  align-items: center;
  svg {
    margin-right: 10px;
  }
}
.video-text {
  margin: 16px 0;
  span {
    font-size: 15px;
    display: inline-block;
    height: 84px;
    overflow: hidden;
  }
}

.video-text-more {
  cursor: pointer;
  color: #61666d;
  margin-top: 10px;
}
.video-text-more:hover {
  color: #00aeec;
}
.vcd {
  margin: 18px 0;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
}
.vcd:hover {
  title {
    color: #00aeec;
  }
}
.cover {
  margin-right: 10px;
  border-radius: 6px;
  width: 141px;
  height: 80px;
  background: #c9ccd0;
  flex: 0 0 auto;
}
.cover-img {
  width: 100%;
  height: 100%;
  border-radius: 6px !important;
}
.title {
  display: block;
  font-size: 15px;
  line-height: 19px;
  margin-bottom: 6px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.info {
  font-size: 13px;
  flex: 1;
}

.user-info {
  box-sizing: border-box;
  min-height: 58px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
}
.u-face {
  width: 48px;
  height: 48px;
  position: relative;
  flex-shrink: 0;
}
.avatar-loaded {
}
.up-info_right {
  margin-left: 12px;
  flex: 1;
  overflow: auto;
}
.name {
  height: 22px;
  line-height: 22px;
  font-size: 15px;
  color: #18191c;
  color: var(--text1);
  display: flex;
  align-items: center;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
.username {
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 12px;
  max-width: calc(100% - 12px - 56px);
}
.mask {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
}
.up-info_right_message {
  color: #61666d;
  font-size: 13px;
  transition: color 0.3s;
  flex-shrink: 0;
}
.desc {
  margin: 2px 0 10px 0;
  font-size: 13px;
  line-height: 16px;
  height: 16px;
  color: #9499a0;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-loaded {
  background-color: transparent;
}
.up-info-v1 .u-face .u-face__avatar {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #c9ccd0;
}
.up-info-v1 .btn-panel {
  clear: both;
  display: flex;
  margin-top: 5px;
  white-space: nowrap;
}
.not-follow {
  background: #00aeec;
  color: #fff;
  span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
}
.default-btn {
  box-sizing: border-box;
  padding: 0;
  line-height: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #00aeec;
  position: relative;
}
.follow-btn {
  flex: 1 1 auto;
  max-width: 200px;
}
.bili-avatar {
  display: block;
  position: relative;
  background-image: url();
  background-size: cover;
  border-radius: 50%;
  margin: 0;
  padding: 0;
}
.bili-avatar-img-radius {
  border-radius: 50%;
}
.bili-avatar-img {
  border: none;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
}
.bili-avatar-face {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.bili-avatar-size-48 {
  width: 18px;
  height: 18px;
  bottom: -1px;
}
.barrage {
  width: 100%;
  padding: 8px 16px;
  overflow: hidden;
  background: #eee;
  line-height: 31px;
  height: 28px;
  border-radius: 5px;
  // box-sizing: border-box;
}
.barrage-left {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.barrage-right {
  float: right;
}
</style>
